<template>
  <div class="article-container">
    <!-- 遍历文章内容，根据不同类型渲染不同的格式 -->
    <div class="article-content">
      <div
          v-for="(section, index) in visibleContent"
          :key="index"
          :class="{ 'blurred': !isPremiumUser && index >= visibleSectionsCount }"
      >
        <!-- 根据 section 的类型动态渲染 -->
        <h1 v-if="section.type === 'title'">{{ section.text }}</h1>
        <h2 v-else-if="section.type === 'subtitle'">{{ section.text }}</h2>
        <p v-else-if="section.type === 'paragraph'">{{ section.text }}</p>
        <h3 v-else-if="section.type === 'discribe'">{{ section.text }}</h3>
      </div>
      <div class="demo-rate-block">
        <span class="demonstration" style="font-size: 16px">为这篇文章评分  </span>
        <el-rate v-model="value2" :colors="colors" />
      </div>
    </div>

    <!-- 提示非高级用户模糊部分 -->
    <transition name="fade">
      <div v-if="!isPremiumUser" class="read-more-mask">
        <p class="blurred-text">成为高级用户以阅读完整文章...</p>
        <br>
      </div>
    </transition>

    <!-- 切换用户身份按钮 -->
    <button @click="toggleUserType">
      {{ isPremiumUser ? '切换到普通用户' : '切换到高级用户' }}
    </button>
  </div>

</template>

<script>

export default {
  data() {
    return {
      value2:0,
      colors:[
        '#99A9BF', '#F7BA2A', '#FF9900'
      ],
      isPremiumUser: false,  // 用户是否为高级用户
      content: [
        {type: 'title', text: '国产操作系统简史：OpenHarmony的前世今生'},
        {type: 'discribe', text: '作者：Alice'},
        {type: 'discribe', text: '全文共 1324 字，阅读大约需要 10 分钟 '},
        {
          type: 'paragraph',
          text: 'OpenHarmony 是由开放原子开源基金会（OpenAtom Foundation）孵化及运营的开源项目，目标是面向全场景、全连接、全智能时代，基于开源的方式，搭建一个智能终端设备操作系统的框架和平台，促进万物互联产业的繁荣发展。'
        },

        {type: 'subtitle', text: 'OpenHarmony的背景'},
        {
          type: 'paragraph',
          text: '随着 5G 的普及以及物联网的高速发展，越来越多的智能电器设备走进我们的生活，由于各设备厂商的分裂，每种智能设备大多都有自己的专属应用，用户为了使用这些智能设备就需要安装不同设备的应用，随着设备的增多，这种分裂也越来越严重，所以需要一个统一的操作系统来解决设备跨度大，应用诉求差异等问题。'
        },

        {type: 'subtitle', text: 'OpenHarmony的诞生'},
        {
          type: 'paragraph',
          text: '2019年8月份，华为在 HDC 大会上发布了鸿蒙操作系统 0 版本，当时引起了极大的轰动，这个轰动背后更深层次的原因相信大家都知道的，在当前大环境下，尤其是操作系统、工业软件以及芯片等重要领域，我们国家缺少自主可控的核心技术，鸿蒙的发布，被寄予了厚望。'
        },
        {
          type: 'paragraph',
          text: '2020年6月份，开放原子开源基金会正式成立，它是我国目前唯一一个立足于中国，面向全球的开源基金会，对标的是国外基金会，比如 Apache 基金会。'
        },
        {
          type: 'paragraph',
          text: '2020年9月份，华为向开放原子开源基金会捐赠了鸿蒙操作系统的首批基础能力相关代码并随后开源， OpenHarmony 0 版本由此诞生，此时它的能力范围有限，基本集中在 OS 基础框架和部件化架构上，支持的产品也以轻量无屏设备为主，例如蓝牙耳机，路由器等。'
        },
        {
          type: 'paragraph',
          text: '2021年5月份，华为再次把鸿蒙操作系统的核心基础能力全部捐献给了开放原子开源基金会并由基金会对外开源，这就是 OpenHarmony 2.0 版本，这个版本支持简单 UI 类应用开发，支持的设备也升级到智能手表等小型带屏设备。'
        },
        {
          type: 'paragraph',
          text: '2021年9月份，开放原子开源基金会发布了 OpenHarmony 3.0 版本，这个版本开放了 OpenHarmony 标志性的分布式能力，支持了更多基础类应用开发，例如日历、图库等，从该版本起， OpenHarmony 已经可以支持显示器、数码相机等简单标准带屏设备。'
        },
        {
          type: 'paragraph',
          text: '2022年3月份，开放原子开源基金会正式发布 OpenHarmony 3.1 Release 版本，笔者认为该版本的发布是一个里程碑事件，标志着 OpenHarmony 基本具备了带屏设备的产品能力，根据 Gitee 的提交记录，该版本对键盘，鼠标以及操控版都提供了支持，同时也支持多窗口管理以及引入了新的自研图形栈，换句话说，3.1 版本为上手机、PC 做好了准备……'
        },
        {type: 'paragraph', text: '2022年9月份，期待 930 版本……'},

        {type: 'subtitle', text: 'OpenHarmony与HarmonyOS的关系'},
        {
          type: 'paragraph',
          text: 'OpenHarmony 与传统的操作系统不同，它既不是对标 Android 也不是 iOS，它是面向全场景、全连接、全智能的下一代智能终端设备操作系统的框架和平台，促进万物互联产业的繁荣发展。'
        },
        {
          type: 'paragraph',
          text: 'HarmonyOS 是华为基于 OpenHarmony 打造的商用发行版本，它在 OpenHarmony 的基础上添加了自家的闭源服务HMS。打个比方，OpenHarmony 如果是一座毛坯房，华为把这个毛坯房进行了精装修并添加了自家的电器（HMS等）形成了 HarmonyOS。'
        },

        {type: 'subtitle', text: 'OpenHarmony的技术架构'},
        {
          type: 'paragraph',
          text: 'OpenHarmony 整体遵从分层设计，从下向上依次为：内核层、系统服务层、框架层和应用层。系统功能按照“系统 > 子系统 > 组件”逐级展开，在多设备部署场景下，支持根据实际需求裁剪某些非必要的组件。'
        },
        {
          type: 'paragraph',
          text: '内核层：采用多内核（Linux内核或者LiteOS）设计，支持针对不同资源受限设备选用适合的OS内核。内核抽象层（KAL，Kernel Abstract Layer）通过屏蔽多内核差异，对上层提供基础的内核能力，包括进程/线程管理、内存管理、文件系统、网络管理和外设管理等。'
        },
        {
          type: 'paragraph',
          text: '驱动子系统：驱动框架（HDF）是系统硬件生态开放的基础，提供统一外设访问能力和驱动开发、管理框架。'
        },
        {
          type: 'paragraph',
          text: '系统服务层：系统服务层是 OpenHarmony 的核心能力集合，通过框架层对应用程序提供服务。该层包含以下几个部分：'
        },
        {
          type: 'paragraph',
          text: '系统基本能力子系统集：为分布式应用在多设备上的运行、调度、迁移等操作提供了基础能力，由分布式软总线、分布式数据管理、分布式任务调度、公共基础库、多模输入、图形、安全、AI等子系统组成。'
        },
        {
          type: 'paragraph',
          text: '增强软件服务子系统集：提供针对不同设备的、差异化的能力增强型软件服务，由智慧屏专有业务、穿戴专有业务、IoT专有业务等子系统组成。'
        },
        {
          type: 'paragraph',
          text: '硬件服务子系统集：提供硬件服务，由位置服务、用户IAM、穿戴专有硬件服务、IoT专有硬件服务等子系统组成。'
        },
        {
          type: 'paragraph',
          text: '根据不同设备形态的部署环境，基础软件服务子系统集、增强软件服务子系统集、硬件服务子系统集内部可以按子系统粒度裁剪，每个子系统内部又可以按功能粒度裁剪。'
        },
        {
          type: 'paragraph',
          text: '框架层：框架层为应用开发提供了C/C++/JS等多语言的用户程序框架和Ability框架，适用于JS语言的ArkUI框架，以及各种软硬件服务对外开放的多语言框架API。'
        },
        {
          type: 'paragraph',
          text: '应用层：应用层包括系统应用和第三方非系统应用。应用由一个或多个FA（Feature Ability）或PA（Particle Ability）组成。FA 有UI界面，提供与用户交互的能力；PA 无UI界面，提供后台运行任务的能力以及统一的数据访问抽象。'
        },

        {type: 'subtitle', text: 'OpenHarmony的技术特性'},
        {
          type: 'paragraph',
          text: 'OpenHarmony 的主要技术特性包括硬件互助、资源共享、分布式软总线、分布式数据管理、分布式任务调度、设备虚拟化等。它实现了应用在多个设备之间的无缝切换，同时确保一致性和高效性。'
        },
        {
          type: 'paragraph',
          text: '分布式软总线：多设备终端的统一基座，为设备间的无缝互联提供了统一的分布式通信能力，能够快速发现并连接设备，高效地传输任务和数据。'
        },
        {
          type: 'paragraph',
          text: '分布式数据管理：实现了应用程序数据和用户数据的分布式管理。用户数据不再与单一物理设备绑定，业务逻辑与数据存储分离，应用跨设备运行时数据无缝衔接。'
        },
        {
          type: 'paragraph',
          text: '分布式任务调度：支持对跨设备的应用进行远程启动、远程调用、绑定/解绑、迁移等操作，能够实现任务的无缝切换。'
        },
        {
          type: 'paragraph',
          text: '硬件互助与资源共享：OpenHarmony 打破了设备之间的界限，用户可基于分布式能力跨设备共享资源，构建多设备协同的能力。设备间可以共享硬件和资源，例如跨设备摄像头、屏幕、麦克风、扬声器等，提升多设备协同使用体验。'
        },
        {
          type: 'paragraph',
          text: '设备虚拟化：通过设备虚拟化技术，用户可以把多台设备通过一个虚拟控制器统一管理，所有设备协作如同一个虚拟设备。'
        },

        {type: 'subtitle', text: 'OpenHarmony的未来展望'},
        {
          type: 'paragraph',
          text: '随着 OpenHarmony 的不断发展，未来它将继续加强对不同类型设备的支持，并且在数据安全、应用生态等领域有所突破。可以预见的是， OpenHarmony 将不仅仅是物联网操作系统，它更可能成为万物互联的基础设施，推动智能设备和应用的进一步融合与发展。'
        },
      ]
    };
  },
  computed: {
    visibleContent() {
      return this.isPremiumUser
          ? this.content
          : this.content.slice(0, Math.ceil(this.content.length / 4));
    },
    visibleSectionsCount() {
      return Math.ceil(this.content.length / 4);
    }
  },
  methods: {
    toggleUserType() {
      this.isPremiumUser = !this.isPremiumUser;
    }
  }
};
</script>

<style scoped>
.article-container {
  max-width: 1000px;
  position: relative;
  padding: 20px;
  background-color: #f5f5f5;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.article-content {
  transition: filter 1s ease;
}

.blurred {
  filter: blur(5px);
}

.read-more-mask {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100px;
  background: linear-gradient(transparent, rgba(255, 255, 255, 0.9));
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.blurred-text {
  font-size: 16px;
  color: #888;
}

.fade-enter-active, .fade-leave-active {
  transition: opacity 1s;
}

.fade-enter, .fade-leave-to /* .fade-leave-active in <2.8 */
{
  opacity: 0;
}

button {
  margin-top: 20px;
  padding: 10px 20px;
  font-size: 16px;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

button:hover {
  background-color: #45a049;
}
</style>